<template>
  <div>
    <div class="user-title-box">项目信息</div>
    <el-descriptions class="margin-bottom" :column="3" border v-if="dataObj && dataObj2">
      <el-descriptions-item label="项目名称">
        <div slot="label" class="justify_4">项目名称</div>
        {{ dataObj.project_name }}
      </el-descriptions-item>
      <el-descriptions-item label="项目编号">
        <div slot="label" class="justify_4">项目编号</div>
        <span v-if="hrefProject" class="click-color" @click="hrefProjectFunc">{{ dataObj.project_number }}</span>
        <span v-else>{{ dataObj.project_number }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="项目品牌">
        <div slot="label" class="justify_4">项目品牌</div>
        {{ dataObj.brand_name }}
      </el-descriptions-item>
      <el-descriptions-item label="项目类型">
        <div slot="label" class="justify_4">项目类型</div>
        {{ dataObj.store_type_name }}
      </el-descriptions-item>
      <!-- 合同详情 -->
      <el-descriptions-item label="已付金额" v-if="type == 'contractManagement'">
        <div slot="label" class="justify_4">已付金额</div>
        {{ dataObj.paid_amount }}元
      </el-descriptions-item>
      <template v-if="sjFile">
        <el-descriptions-item label="平面图" v-if="dataObj.design_drawings.plan_drawing">
          <div slot="label" class="justify_4">平面图</div>
          <div class="file-box-img-box flex a">
            <div class="file-box-img" v-for="(item, index) in dataObj.design_drawings.plan_drawing" :key="index"
              @click="$fileViewHandle(item)">
              <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                <img @click="$fileViewHandle(item)" class="img" :src="$fileImgFunc(item)" />
              </el-tooltip>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="效果图" v-if="dataObj.design_drawings.effect_drawing">
          <div slot="label" class="justify_4">效果图</div>
          <div class="file-box-img-box flex a">
            <div class="file-box-img" v-for="(item, index) in dataObj.design_drawings.effect_drawing" :key="index"
              @click="$fileViewHandle(item)">
              <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                <img @click="$fileViewHandle(item)" class="img" :src="$fileImgFunc(item)" />
              </el-tooltip>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="施工图" v-if="dataObj.design_drawings.construction_drawing">
          <div slot="label" class="justify_4">施工图</div>
          <div class="file-box-img-box flex a">
            <div class="file-box-img" v-for="(item, index) in dataObj.design_drawings.construction_drawing" :key="index"
              @click="$fileViewHandle(item)">
              <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                <img @click="$fileViewHandle(item)" class="img" :src="$fileImgFunc(item)" />
              </el-tooltip>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="其他文件" v-if="dataObj.design_drawings.other_file">
          <div slot="label" class="justify_4">其他文件</div>
          <div class="file-box-img-box flex a">
            <div class="file-box-img" v-for="(item, index) in dataObj.design_drawings.other_file" :key="index"
              @click="$fileViewHandle(item)">
              <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                <img @click="$fileViewHandle(item)" class="img" :src="$fileImgFunc(item)" />
              </el-tooltip>
            </div>
          </div>
        </el-descriptions-item>
      </template>
      <!-- 添加结算单 -->
      <template v-if="type == 'setting'">
        <!-- <el-descriptions-item label="待收金额">
          <div slot="label" class="justify_4">待收金额</div>
          {{ dataObj.unpaid_amount ? dataObj.unpaid_amount : '--' }}元
        </el-descriptions-item>
        <el-descriptions-item label="已收金额">
          <div slot="label" class="justify_4">已收金额</div>
          {{ dataObj.paid_amount ? dataObj.paid_amount : '--' }}元
        </el-descriptions-item> -->
        <el-descriptions-item label="合同编号">
          <div slot="label" class="justify_4">合同编号</div>
          <span v-if="hrefProject" class="click-color" @click="contractFunc(dataObj2.contract.contract_id)">
            {{ dataObj2.contract.contract_number }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="报价编号">
          <div slot="label" class="justify_4">报价编号</div>
          <span v-if="hrefProject" class="click-color" @click="quotationFunc">
            {{ dataObj2.quotation.quotation_number }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="增减项已完成">
          <div slot="label" class="justify_4">增减项已完成</div>
          <span v-if="hrefProject" class="click-color" @click="changeItemFunc">
            {{ dataObj2.quotation.change_items_completed_num }}项
          </span>
        </el-descriptions-item>
      </template>
    </el-descriptions>
  </div>
</template>

<script>
import commonApi from "@/api/common";
import saleApi from '@/api/saleApi';
export default {
  name: 'ProjectMsg',
  props: ["projectId", "sjFile", "hrefProject", "type"],//项目id。设计文件。是否跳项目详情。type='setting'添加项目结算显示已收代收

  // props: {
  //   projectId: {
  //     default: () => {
  //       return ''
  //     }
  //   },
  //   sjFile: {
  //     type: Boolean,
  //     default: () => {
  //       return false
  //     }
  //   }
  // },
  data() {
    return {
      dataObj: "",
      dataObj2: ''
    }
  },
  watch: {
    projectId() {
      console.log(this.projectId, "this.projectId")
      this.selectProjectDetails();
      this.saleProjectDetails();
    }
  },
  methods: {
    // 获取项目基本信息
    selectProjectDetails() {
      if (!this.projectId) return;
      commonApi.selectProjectDetails({
        project_id: this.projectId
      }).then(res => {
        console.log(res, "获取项目基础信息")
        if (res.code == 200) {
          this.dataObj = res.data;
        }
      })
    },
    // 项目详情
    saleProjectDetails() {
      if (!this.projectId) return;
      saleApi.saleProjectDetails({
        project_id: this.projectId
      }).then(res => {
        console.log(res, "项目详情")
        if (res.code == 200) {
          this.dataObj2 = res.data;
        }
      })
    },
    // 跳项目详情
    hrefProjectFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({ path: '/projectDetailNew', query: { id: this.dataObj.project_id } })
    },
    // 查看合同信息
    contractFunc(id) {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/contractDetailPage',
        query: {
          id,
          type: 1
        }
      })
    },
    // 查看报价信息
    quotationFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/budgetDetailPage',
        query: {
          id: this.projectId
        }
      })
    },
    // 查看增减项
    changeItemFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/increaseDecreaseItemsList',
        query: {
          project_name: this.dataObj2.basic_information.project_name,
        }
      })
    },
  },
  mounted() {
    this.selectProjectDetails();
  }
}
</script>

<style lang='scss' scoped>
@import "@/styles/addPage.scss";
@import "./index.scss";
</style>
